<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <title>大屯小卖部 - Pay Page</title>
	    <link href="<c:url value=" /resources/css/mypage/toolkit-inverse.css " />" rel="stylesheet">
	    <link href="<c:url value=" /resources/css/mypage/application.css " />" rel="stylesheet">
	    <!-- Icon Image -->
	    <link rel="shortcut icon" href="<c:url value="/resources/image/favicon.ico" />" />
	</head>
	<body>
	    <div class="bw">
	        <div class="fu">
	            <div class="ge aom">
	                <nav class="aot">
	                    <div class="aon" style="text-align: center;">
	                        <div>
	                            <a href="/"><img src="<c:url value=" /resources/image/logo.png " />" style="width:32px;height:32px;"></a>
	                        </div>
	                    </div>
	                    <div class="collapse and" id="nav-toggleable-sm">
	                        <ul class="nav of nav-stacked" style="text-align:center;">
	                        	<li class="tq">Dashboards</li>
	                            <li><a href="/mypage">Overview</a></li>
	                            <li><a href="/order/page/1">Orders</a></li>
	                            <li><a href="/shoppingcart">Shopping Cart</a></li>
	                            <li><a href="#">My Address</a></li>
	                            <li class="tq">More</li>
	                            <li><a href="#">New Product</a></li>
	                            <li><a href="#">Contact DTXMB</a></li>
	                        </ul>
	                        <hr class="rw aky">
	                    </div>
	                </nav>
	            </div>
	            <div class="hc aps">
	                <div class="apa">
	                    <div class="apb">
	                        <!-- <h6 class="apd"></h6> -->
	                        <h2 class="apc">Order Detail</h2>
	                    </div>
	                    <div class="ob ape">
	                        <div class="tn aol" style="width:auto;">$${order.amout}</div>
	                    </div>
	                </div>
	                
	                <hr class="aky">
	                
	                <div class="ud">
    					<div class="eg">
        					<table class="cl" data-sort="table" style="text-align:center;">
					            <thead>
					                <tr>
					                    <th style="text-align:center;" class="header"></th>
					                    <th style="text-align:center;" class="header">Product</th>
					                    <th style="text-align:center;" class="header">Number</th>
					                    <th style="text-align:center;" class="header">Price</th>
					                </tr>
					            </thead>
            					<tbody>
            						<c:forEach var="st" items="${orderList}">	
						                <tr>
						                	<td><img style="border-radius: 50%;vertical-align: middle;border: 0;" src="${st.image}" height="36" width="36" /></td>
						                    <td style="font-size:16px;vertical-align: middle;">${st.name}</td>
						                    <td style="font-size:16px;vertical-align: middle;">${st.productnumber}</td>
						                    <td style="font-size:16px;vertical-align: middle;">$${st.price}</td>
						                </tr>
					                </c:forEach>
            					</tbody>
        					</table>
        					
        					<hr class="aky">
        					<div style="text-align:center">
        						<a href="/pay/${order.id}" class="ce apn ame">Pay With VISA &amp; MasterCard</a>
        					</div>
    					</div>
	            	</div>
	        	</div>
	    	</div>
	    </div>
	    <script src="<c:url value=" /resources/js/mypage/jquery.min.js " />"></script>
	    <script src="<c:url value=" /resources/js/mypage/chart.js " />"></script>
	    <script src="<c:url value=" /resources/js/mypage/tablesorter.min.js " />"></script>
	    <script src="<c:url value=" /resources/js/mypage/toolkit.js " />"></script>
	    <script src="<c:url value=" /resources/js/mypage/application.js " />"></script>
	</body>
</html>